<template>
  <div class="basic-tips-bar">
    <basic-icon
      name="info-circle-filled"
      class="mr-1"
      :color="config.color"
    ></basic-icon>
    <span>
      <slot></slot>
    </span>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  type: 'primary' | 'warning' | 'danger'
}

const props = defineProps<IProps>()

const map = {
  primary: {
    bg: '#F3F6FF',
    color: '#164CFF'
  },
  warning: {
    bg: '#FEF2E6',
    color: '#FF6805'
  },
  danger: {
    bg: '',
    color: ''
  }
}

const config = computed(() => {
  return map[props.type]
})
</script>

<style scoped lang="scss">
.basic-tips-bar {
  @apply text-[#454954] py-[8px] px-[10px] text-[14px] rounded-[4px] flex items-center;

  background-color: v-bind('config.bg');
}
</style>
